<!--
 * @Description:: 请补充填写
 * @Version: 1.0
 * @Author: 小白
 * @Date: 2022-04-14 14:26:46
 * @LastEditors: 小白
 * @LastEditTime: 2025-10-27 13:18:44
 * @FilePath: \tmsadmin\src\views\contract\staff\components\details.vue
-->

<template>
  <SearchForm @search="searchFun" :houseList="houseList" style="margin-bottom: 20px" />
  <el-card class="page_card" shadow="never">
    <template #header>
      <div class="card-header">
        <div class="left">
          合同列表
          <el-button type="success" @click="exportContract('导出合同')" style="margin-left: 20px">
            导出合同
          </el-button>
        </div>
        <div class="right">
          <!-- 返回上一页 -->
          <el-button style="margin-left: 20px" type="primary" @click="goBack()">
            返回上一页
          </el-button>
          <el-button circle @click="refreshFun">
            <i class="icon ion-refresh" :class="iconRefresh" />
          </el-button>
        </div>
      </div>
    </template>
    <Table :table-data="tableData" :table-columns="columns" :page-size="pageSize" :page-num="pageNum" :loading="loading"
      :total="total" @edit="edit" @selectionChange="selectionChange" @change="changePage" @ok="getData()" />

  </el-card>
</template>
<script lang="ts" setup>
import { REQUEST } from '@/api/request'
import { ElMessage, ElMessageBox } from 'element-plus'
import SearchForm from './searchDetails.vue'

import Table from './table.vue'
import { onMounted, ref, watch } from 'vue'
const queryForm = ref({})
const iconRefresh = ref('')
const props = defineProps({
  params: {
    type: Object,
    default: () => ({})
  }
})

const pageNum = ref(1)
const pageSize = ref(10)
const total = ref(0)
const loading = ref(false)
const tableData = ref([])
const columns = ref([
  {
    title: '员工姓名',
    prop: 'staff',
    align: 'center',
    modifiable: true,
    isShow: true,
    minwidth: '180'
  },
  {
    title: '合同编号',
    prop: 'contractNo',
    align: 'center',
    modifiable: true,
    isShow: true,
    tooltip: false,
    minwidth: '180'
  },
  {
    title: '签署状态',
    prop: 'status',
    align: 'center',
    modifiable: true,
    isShow: true,
    tooltip: false,
    minwidth: '180'
  },
  {
    title: '创建时间',
    prop: 'createTime',
    align: 'center',
    modifiable: true,
    isShow: true,
    minwidth: '180'
  },
  {
    title: '操作',
    prop: 'actionss',
    align: 'center',
    modifiable: true,
    isShow: true,
    minwidth: '180'
  }
])
const emits = defineEmits(['go'])
const goBack = () => {
  emits('go', { view: 'ActiveList', params: { row: {} } })
}
watch(() => props.params.id, (val: any) => {
  if (val) {
    getData()
  }
})
const exportContract = ()=>{
  if(selectList.value.length === 0){
    ElMessage.error('请选择一条数据进行导出')
    return
  }else if(selectList.value.length > 0){
    const datas = selectList.value.filter((item: any) => {return item.status == '1'})
      if(datas.length > 0){
        ElMessage.error('请选择已签署的合同进行导出')
        return
      }
    
  }
  const urlList = selectList.value.map((item: any) => {
    return item.contractUrl
  })
  REQUEST.POST('EXPORTLIST', {
    urlList:urlList
  }).then(res=>{
    ElMessage.success('导出成功')
    fetchAndDownload(res.data.url, '合同.pdf')
  })
}
const fetchAndDownload=async (url, filename)=> {
  try {
    const response = await fetch(url);
    const blob = await response.blob();
    const downloadUrl = URL.createObjectURL(blob);
    
    const a = document.createElement('a');
    a.href = downloadUrl;
    a.download = filename || 'file';
    a.click();
     
    URL.revokeObjectURL(downloadUrl); // 释放内存
  } catch (error) {
    console.error('下载失败:', error);
  }
}

onMounted(() => {
  getData()
})

const getData = () => {
  // loading.value = true
  REQUEST.POST('USERCONTRACTLIST', {
    userIds: props.params.id,
    ...queryForm.value
  }).then((res: any) => {
    tableData.value = res.data
  })
}
const modalRefYhq = ref()
const refreshFun = () => {
  iconRefresh.value = 'iconRefresh'
  getData()
  setTimeout(() => {
    iconRefresh.value = ''
  }, 1000)
}
const searchFun = (e: any) => {
  queryForm.value = e
  getData()
}
const selectList = ref([])
const selectionChange = (e: any) => {
  selectList.value = e
}

const edit = () => {
  if (selectList.value.length !== 1) {
    ElMessage.error('请选择一条数据进行编辑')
    return
  } else {
    modalRef.value.openModal('编辑员工信息', houseList.value, selectList.value[0])
  }
}
const changePage = (e: any) => {
  pageNum.value = e.pageNum
  pageSize.value = e.pageSize
  getData()
}
</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
